<template>
  <div>
    <!-- 搜索表单 行内表单 -->
    <el-form :rules="rules" ref="form"
      :inline="true"
      :model="form"
      @submit.native.prevent
      class="demo-form-inline"
    >
      <el-form-item label="姓名" prop="actorName">
        <el-input
          v-model="form.actorName"
          @keyup.native.enter="onSubmit"
          placeholder="输入姓名"
        ></el-input> </el-form-item
      ><br />
      <el-form-item label="选择头像" prop="actorAvatar">
        <el-upload v-model="form.actorAvatar"
          class="avatar-uploader"
          action="http://localhost:9000/upload"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        ><img v-if="form.actorAvatar" :src="form.actorAvatar" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <br />
      <el-form-item>
        <el-button type="primary" @click="submit">新增</el-button>
        <el-button type="primary" >返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        actorName: "",
        actorAvatar:""
      },
      rules:{
        actorName:[
            {required:true,message:'姓名必填',trigger:'blur'},
        ],
        actorAvatar:[
            {required:true,message:'头像必须上传',trigger:'blur'},
        ]
      }
    };
  },
  methods: {
    submit(){
        // 验证表单是否符合要求
        this.$refs['form'].validate(valid=>{
            if(valid){
                console.log('验证通过');
                this.$http.actorApi.add(this.form).then(res=>{
                    console.log('添加成功!');
                    if(res.data.code==200){
                        this.$refs['form'].resetFields()   //重置表单
                        this.$message({
                            message:'新增演员完成',
                            type:'success'
                        })
                    }
                })             
            }
        })
    },
    handleAvatarSuccess(res,file) {
        console.log(res);
        this.form.actorAvatar=res.data
    },
    beforeAvatarUpload(){},
  },
};
</script>

<style lang="scss" >
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 138px;
  height: 138px;
  line-height: 138px;
  text-align: center;
}
.avatar {
  width: 128px;
  height: 128px;
  display: block;
}
</style>
